<template>
  <div class="wrap">
    <!-- <van-button type="primary">主要按钮</van-button> -->
    <div class="bannerWrap">
      <img
        v-if="!resInforData.userBannerImg"
        src="@/assets/dele/shopBg.png"
        alt=""
        class="banner"
      />
      <img v-else :src="$imgUrl + resInforData.userBannerImg" alt="" class="banner" />
      <img src="@/assets/point.png" alt="" class="point" @click="show = true" />
    </div>
    <div class="mainWrap">
      <div class="topInfoWrap" @click="jumpPersonalData">
        <div class="headInfoWrap">
          <img :src="$imgUrl + resInforData.headImage" alt="" class="headImg" />
        </div>
        <div class="nameLeft">
          <div class="name">
            <em class="nameText">{{ resInforData.nickName }}</em>
            <img src="@/assets/sex.png" alt="" class="sex" v-if="resInforData.sex == 0" />
            <img
              src="@/assets/sex2.png"
              alt=""
              class="sex"
              v-if="resInforData.sex == 1"
            />
            <em class="ID">ID:{{ resInforData.id }}</em>
          </div>
          <div class="school">{{ resInforData.schoolName }}</div>
        </div>
      </div>

      <div class="countStatics">
        <router-link :to="{ name: 'myPostForumList' }">
          <div class="item">
            <em class="bigFont">{{ resInforData.articleNum }}</em>
            发帖
          </div>
        </router-link>
        <router-link :to="{ name: 'attentionList' }">
          <div class="item">
            <em class="bigFont">{{ resInforData.followNum }}</em>
            关注
          </div>
        </router-link>
        <router-link :to="{ name: 'fansList' }">
          <div class="item">
            <em class="bigFont">{{ resInforData.fansNum }}</em>
            粉丝
          </div>
        </router-link>
      </div>
      <div class="menuContainer">
        <div class="titleWrap">
          <div class="leftItem">我的订单</div>
          <div class="rightItem" @click="jumpAllOrderList(-1)">
            查看全部订单
            <img src="@/assets/rightGreyArrow.png" alt="" class="rightGreyArrow" />
          </div>
        </div>
        <div class="menuWrap">
          <div class="menuItem" @click="jumpAllOrderList(0)">
            <img src="@/assets/menuStatus1.png" alt="" class="menuItemImg" />
            <div class="menuItemText">待付款</div>
          </div>
          <div class="menuItem" @click="jumpAllOrderList(1)">
            <img src="@/assets/menuStatus2.png" alt="" class="menuItemImg" />
            <div class="menuItemText">待接单</div>
          </div>
          <div class="menuItem" @click="jumpAllOrderList(2)">
            <img src="@/assets/menuStatus3.png" alt="" class="menuItemImg" />
            <div class="menuItemText">待送达</div>
          </div>
          <div class="menuItem" @click="jumpAllOrderList(3)">
            <img src="@/assets/menuStatus4.png" alt="" class="menuItemImg" />
            <div class="menuItemText">待评价</div>
          </div>
          <div class="menuItem" @click="jumpAfterSaleList">
            <img src="@/assets/menuStatus5.png" alt="" class="menuItemImg" />
            <div class="menuItemText">售后/退款</div>
          </div>
        </div>
      </div>
      <div class="menuWrap menuWrap2">
        <div class="menuItem menuItem2" @click="jumpBusiness">
          <img src="@/assets/personOption1.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">成为商家</div>
        </div>
        <div class="menuItem menuItem2" @click="jumpAboutUs">
          <img src="@/assets/personOption2.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">关于我们</div>
        </div>
        <router-link :to="{ name: 'privacyPolicy' }" @click="jumpPrivacyPolicy">
          <div class="menuItem menuItem2">
            <img src="@/assets/personOption3.png" alt="" class="menuItemImg2" />
            <div class="menuItemText">隐私政策</div>
          </div>
        </router-link>
        <div class="menuItem menuItem2" @click="jumpServiceAggrement">
          <img src="@/assets/personOption4.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">服务协议</div>
        </div>
        <div class="menuItem menuItem2" @click="JumpMyShop">
          <img src="@/assets/personOption5.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">我的店铺</div>
        </div>
        <div class="menuItem menuItem2">
          <a
            href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg2NzUzNjA4NQ==&scene=124#wechat_redirect"
          >
            <img src="@/assets/personOption6.png" alt="" class="menuItemImg2" />
            <div class="menuItemText">在线客服</div>
          </a>
        </div>
        <div class="menuItem menuItem2">
          <a
            href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg2NzUzNjA4NQ==&scene=124#wechat_redirect"
          >
            <img src="@/assets/personOption7.png" alt="" class="menuItemImg2" />
          </a>
          <div class="menuItemText">创业咨询中心</div>
        </div>
      </div>
      <div style="height: 100px"></div>
    </div>
    <!-- 遮罩层-退出登录 -->
    <div class="maskWrap" v-if="show">
      <div class="maskBg" @click="show = false"></div>
      <div class="chooseNumWrap">
        <div class="optionsItem" @click="loginOut">退出登录</div>
        <div class="optionsItem dele" @click="show = false">取消</div>
      </div>
    </div>
    <!-- <tabbar></tabbar> -->

    <div class="tabbarWrap" v-if="!show">
      <router-link :to="{ name: 'index' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar1.1.png" alt="" class="tabbarImg" />
          <p class="tabbarText">首页</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'forumIndex' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar2.1.png" alt="" class="tabbarImg" />
          <p class="tabbarText">论坛</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'personalCenter' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar3.2.png" alt="" class="tabbarImg" />
          <p class="tabbarText">我的</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { Switch } from "vant";
import tabbar from "../components/tabbar";
import { apiGetAppUserInfo } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      show: false,
      resInforData: "", //个人信息
    };
  },
  activated(){
  
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#fff");
    this.getAppUserInfo();
  },
    //  跳转后回到指定界面
    beforeRouteEnter(to, from, next) {
      console.log(to);
        next(vm => {
      // 回到原来的位置
      const position = JSON.parse(window.sessionStorage.getItem('position3'))
      console.log(position);
      window.scrollTo(0,position)
    })
      

  },
  beforeRouteLeave(to, from, next) {
    console.log(to);
    // 保存离开页面时的位置
    const position = window.scrollY
    window.sessionStorage.setItem('position3', JSON.stringify(position))
    next()
  },


  methods: {
    //获取个人数据：
    getAppUserInfo() {
      apiGetAppUserInfo({}).then((res) => {
        this.resInforData = res.data;
        console.log("个人信息", this.resInforData);
      });
    },
    jumpPersonalData() {
      this.$router.push({
        path: "/pages/personalData",
        query: {
          //传递参数
        },
      });
    },
    //订单列表：
    jumpAllOrderList(i) {
      this.$router.push({
        path: "/pages/allOrderList",
        query: {
          //传递参数
          status:i
        },
      });
    },
    // 售后订单列表：
    jumpAfterSaleList() {
      this.$router.push({
        path: "/pages/afterSaleList",
        query: {
          //传递参数
        },
      });
    },
    
    //成为商家
    jumpBusiness() {
      var userInfo = this.resInforData;
      if (userInfo.category == 2 && userInfo.isShopFinish) {
        //是商家且店铺资料已经完善（直接跳转商家登录页）
        console.log(1);
        var sessionUserInfo = sessionStorage.getItem("loginInfo");
        if (sessionUserInfo) {
          sessionStorage.setItem('changeWho',1) //切换为商家
          	// window.location.href = `${this.$hostName}/#/pages/bIndex`;
          this.$router.push({
            path: "/pages/bIndex",
            query: {
              //传递参数
            },
          });
        } else {
          this.$router.push({
            path: "/pages/bLogin",
            query: {
              //传递参数
            },
          });
        }
      } else if (userInfo.category == 2 && !userInfo.isShopFinish) {
        //是商家但店铺资料未完善（跳转填写店铺详细资料页面）
        console.log(2);
        this.$router.push({
          // path: "/pages/beBusinessman",
          path: "/pages/fillShopInfomation",
          query: {
            //传递参数
          },
        });
      } else if (userInfo.category == 1 && !userInfo.isSubmitApply) {
        //不是商家身份且没有提交过成为商家申请（跳转填写成为商家的申请资料页面）
        console.log(3);
        this.$router.push({
          path: "/pages/BecomeBusinessman",
          query: {
            //传递参数
          },
        });
      } else if (userInfo.category == 1 && userInfo.isSubmitApply) {
        //不是商家但提交过申请 说明审核被拒或者正在审核中（跳转被拒页面包含审核中的信息）
        console.log(4);
        this.$router.push({
          path: "/pages/checkRefuse",
          query: {
            //传递参数
          },
        });
      }
    },
    //我的店铺：
    JumpMyShop() {
      var userInfo = this.resInforData;
      var sessionUserInfo = sessionStorage.getItem("loginInfo");
      if (userInfo.category == 2 && userInfo.isShopFinish) {
        //是商家且店铺资料已经完善（直接跳转商家登录页）
        if (sessionUserInfo) {
          this.$router.push({
            path: "/pages/bIndex",
            query: {
              //传递参数
            },
          });
        } else {
          this.$router.push({
            path: "/pages/bLogin",
            query: {
              //传递参数
            },
          });
        }
      } else if (userInfo.category == 2 && !userInfo.isShopFinish) {
        //是商家但店铺资料未完善（直接跳转商家店铺资料填写页）
        this.$router.push({
          path: "/pages/fillShopInfomation",
          query: {
            //传递参数
          },
        });
      } else {
        this.$toast.fail("您还不是商家，请先成为商家.");
      }
    },
    //关于我们：
    jumpAboutUs() {
      this.$router.push({
        path: "/pages/aboutUs",
        query: {
          //传递参数
        },
      });
    },
    //隐私服务：
    jumpPrivacyPolicy() {
      this.$router.push({
        path: "/pages/privacyPolicy",
        query: {
          //传递参数
        },
      });
    },

    //服务协议：
    jumpServiceAggrement() {
      this.$router.push({
        path: "/pages/serviceAggrement",
        query: {
          //传递参数
        },
      });
    },
    //退出登录
    loginOut() {
      localStorage.removeItem("loginInfo")
      this.$router.replace({
        path: "/pages/login",
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {
    tabbar,
    [Switch.name]: Switch,
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  color: #000;
}
.bannerWrap {
  position: relative;
}
.point {
  display: inline-block;
  width: 18px;
  height: 4px;
  margin-top: 5px;
  position: absolute;
  right: 20px;
  top: 15px;
}
.banner {
  width: 100%;
  height: 220px;
  position: absolute;
}
.mainWrap {
  position: absolute;
  top: 206px;
  background: #fafbfc;
  border-radius: 20px 20px 0px 0px;
  width: 100vw;
}
.topInfoWrap {
  overflow: hidden;
  width: 95%;
  margin: 18px auto;
}
.headInfoWrap {
  width: 70px;
  height: 70px;
  border: 2px solid #f48f5b;
  border-radius: 70px;
  float: left;
}
.headImg {
  width: 100%;
  height: 100%;
  border-radius: 70px;
}
.nameLeft {
  float: left;
  margin-left: 15px;
}
.name {
  font-size: 15px;
  font-weight: 600;
  color: #181818;
  margin-top: 13px;
}
.nameText {
}
.sex {
  width: 12px;
  height: 12px;
  margin: 0px 5px;
}
.ID {
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.school {
  height: 20px;
  line-height: 20px;
  border: 1px solid #000000;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-align: center;
  margin-top: 10px;
}
/* .attention {
  float: right;
  width: 80px;
  height: 33px;
  line-height: 33px;
  background: #181818;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 500;
  color: #181818;
  text-align: center;
  margin-top: 25px;
} */
.countStatics {
  width: 95%;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: #181818;
  height: 35px;
}
.item {
  float: left;
  margin-right: 21px;
}
.bigFont {
  font-size: 15px;
}
.menuContainer {
  width: calc(95% - 40px);
  padding: 16px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
}
.titleWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.leftItem {
  font-size: 12px;
  font-weight: 500;
  color: #333333;
}
.rightItem {
  font-size: 12px;
  font-weight: 300;
  color: #666666;
}
.rightGreyArrow {
  width: 5px;
  height: 9px;
}
.menuWrap {
  overflow: hidden;
}
.menuItem {
  font-size: 11px;
  font-weight: 300;
  color: #333333;
  text-align: center;
  width: 20%;
  margin-top: 20px;
  float: left;
}
.menuItem2 {
  width: 25%;
}
.menuItemImg {
  width: 22px;
  height: 22px;
}
.menuItemImg2 {
  width: 24px;
  height: 22px;
}
.menuItemText {
  text-align: center;
  padding-top: 13px;
}
.menuWrap2 {
  width: 90%;
  margin: 0 auto;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  border-radius: 20px 20px 0px 0px;
}
.optionsItem {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  color: #000;
  font-size: 14px;
  text-align: center;
}
.dele {
  background-color: #eee;
  border-radius: 20px;
  width: 90%;
  margin: 5px auto;
  height: 40px;
  line-height: 40px;
}
</style>
